<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_自定义JS对象</title>
</head>
<body>
<table border="1" style="text-align: center

">
    <caption>商品列表</caption>
    <tr>
        <th>商品标题</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
</table>
<script>
    let productArr = [
        {title:'手机',price:8888,count:10},
        {title:'电脑',price:8888,count:10},
        {title:'鼠标',price:8888,count:10},
        {title:'键盘',price:8888,count:10}
    ];
    console.log(productArr);
    for (let i = 0; i < productArr.length; i++) {
        let trE = document.createElement('tr');
        trE.innerHTML = '<td>'+productArr[i].title+'</td><td>'+productArr[i].price+'</td><td>'+productArr[i].count+'</td>';
        document.querySelector('table').appendChild(trE);
    }
</script>

</body>
</html>